<template>
    <div class="clockBooks">
        <div class="item" v-for="(item,index) in list" :key="index">
            <van-image :src="item.image" height="100%" width="65" 
            @click="goDetail(item)"
            class="image">
                <template v-slot:error>
                    <van-image src="http://www.fyhuabo.com/images/nopic.gif" height="100%" width="100%"></van-image>
                </template>
            </van-image>
            <div class="bookInfo" @click="goDetail(item)">
                <div class="name"><div class="van-ellipsis">{{ item.fictionName }}</div></div>
                <div>{{  dayjs(item.updateTime).format('YYYY/MM/DD HH:mm:ss') }}</div>
            </div>
            <div class="right" v-if="item.type == 'fiction_shelf'">
                <van-button plain round size="small" icon="plus"
                color="#999"
                disabled
                >
                    书架
                </van-button>
                <van-button plain round size="small" icon="delete-o" color="#999" disabled/>
            </div>
            <div class="right" v-else>
                <van-button plain round size="small" icon="plus" type="danger"
                @click="bookshelf(item)"
                >
                    书架
                </van-button>
                <van-button plain round size="small" icon="delete-o" color="#999" 
                @click="del(item)"/>
            </div>
        </div>
    </div>
</template>

<script>
import { getFictionShelfList, getFictionShelfAdd, getFictionShelfDel } from '@/api/fictionShelf'
import { ArrIndexOf } from '@/assets/js/Tools'
import dayjs from 'dayjs'
export default {
    data() {
        return {
            page : 1,
            limit : 20,
            list : []
        }
    },
    created(){
        this.getList()
    },
    methods : {
        dayjs,

        // 获取浏览记录
        getList(){
            getFictionShelfList({
                type : 'all',
                page : this.page,
                limit : this.limit
            }).then(res => {
                if(res.code == 200){
                    this.list = res.data.list
                }
            })
        },

        // 跳转小说详情
        goDetail(item){
            this.$router.push('/bookDetail?id=' + item.fictionId)
        },

        // 加入书架
        bookshelf(item){
            getFictionShelfAdd({
                fid : item.fictionId,
                type : 'fiction_shelf',
                fcId : item.fictionChapterId,
                cNum : item.chapterNum,
            }).then(res => {
                if(res.code == 200){
                    item.type = 'fiction_shelf'
                    this.$toast.success('加入成功')
                }
            })
        },

        // 删除
        del(item){
            this.$Dialog.confirm({
                title : '确认要删除吗？'
            }).then(() => {
                getFictionShelfDel({
                    type : item.type,
                    fid : item.fictionId
                }).then(res => {
                    if(res.code == 200){
                        let i = ArrIndexOf(this.list, item)
                        this.list.splice(i, 1)
                    }
                })
            }).catch(() => {})
        }
    }
}
</script>

<style scoped>
.clockBooks{
    background: #fff;
    overflow-y: scroll;
}
.item{
    position: relative;
    width: calc(100% - 40px);
    height: 82px;
    padding: 10px 20px;
    color: #999;
}
.item >>> .van-image__img{
    border-radius: 7px;
}

.bookInfo{
    position: absolute;
    left: 94px;
    top: 10px;
    font-size: 14px;
    line-height: 23px;
    width: calc(100% - 216px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 82px;
}
.name{
    font-size: 17px;
    font-weight: 500;
    color: #000;
}
.right{
    position: absolute;
    right: 0;
    top: 10px;
    height: 82px;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right button{
    margin: 0 5px;
}
.right button{

}
</style>